<template>
  <div>
    <el-calendar v-model="xjDate">
      <template slot="dateCell" slot-scope="{ date, data }">
        <p class="full-block" @click="getXjjlInfo({ time: date })">
          {{ data.day.split("-").slice(1).join("-") }}
          <el-tag type="danger" v-if="warningList.includes(data.day)">
            缺卡
          </el-tag>
        </p>
      </template>
    </el-calendar>
    <div class="dk-list" v-if="dkList.length">
      <el-row :gutter="10">
        <el-col :span="4" v-for="item in dkList" :key="item.xjjlId">
          <div class="dk-item">
            <el-tag size="mini" type="danger" class="qk" v-if="item.state == 0"
              >缺卡</el-tag
            >
            {{ item.dkmc }}
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import moment from "moment";
export default {
  data() {
    return {
      xjDate: new Date(),
      url: {
        list: "/jtnc/jsydagl/krJsydagl/listXjjl",
        info: "/jtnc/jsydagl/krJsydagl/getXjxq",
      },
      jsyId: "",
      dkList: [],
      warningList: [],
    };
  },
  watch: {
    xjDate(val, oldVal) {
      const month = moment(val).format("MM");
      const oldMonth = moment(oldVal).format("MM");
      if (month === oldMonth) {
        return;
      }
      this.$emit("getxjQk", month);
    },
  },
  methods: {
    // 巡检记录
    getXjjl(param) {
      if (!param.jsyId) {
        this.$message.error("请先选择技术员");
        return;
      }
      this.jsyId = param.jsyId;
      request({
        url: this.url.list,
        method: "get",
        params: {
          jsyId: param.jsyId,
          year: param.year,
          month: param.month,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.warningList = res.data;
        }
      });
    },
    getXjjlInfo(param) {
      if (!this.jsyId) {
        this.$message.error("请先选择技术员");
        return;
      }
      request({
        url: this.url.info,
        method: "get",
        params: {
          jsyId: this.jsyId,
          xjsj: moment(param.time).format("YYYY-MM-DD"),
        },
      }).then((res) => {
        if (res.code == 200) {
          this.dkList = res.data;
        }
      });
    },
    setDate(year) {
      const nowDate = new Date();
      this.xjDate = new Date(year, nowDate.getMonth(), 1);
    },
  },
};
</script>

<style lang="scss" scoped>
.full-block {
  width: 100%;
  height: 100%;
  cursor: pointer;
  padding: 0;
  margin: 0;
  padding: 15px;
  box-sizing: border-box;
}
.dk-list {
  .dk-item {
    width: 100%;
    border: 1px solid #ccc;
    padding: 10px 0;
    text-align: center;
    margin-bottom: 10px;
    position: relative;
    .qk {
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }
}
.el-calendar-table .el-calendar-day {
  padding: 0;
}
.warning-block {
  background-color: #fef0f0;
}
</style>
